// 导入类型、接口、模块、组件、样式
import { FC } from "react";
import { useNavigate } from "react-router-dom";
import { checkCode } from "@/utils/validator";

import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined, CommentOutlined } from "@ant-design/icons";

import { Container1 } from "./styled";

interface Props {}
const Index: FC<Props> = () => {
  // 全局变量
  const navigate = useNavigate();

  // 登录
  const onFinish = (formData: USER.PostLoginPayloadType) => {
    console.log(formData);
    message.success("登录成功");
    navigate("/");
  };

  return (
    <Container1>
      <Form size="large" onFinish={onFinish}>
        <Form.Item>
          <h1>锋美CRM店铺管家</h1>
        </Form.Item>
        <Form.Item
          name="username"
          rules={[
            { required: true, message: "用户名必须" },
            { min: 2, max: 8, message: "用户名至少2~8个字符" },
          ]}
        >
          <Input
            type="text"
            placeholder="请输入用户名"
            prefix={<UserOutlined />}
            allowClear
            autoComplete="off"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            { required: true, message: "密码必须" },
            { min: 6, max: 16, message: "密码至少6~16个字符" },
          ]}
        >
          <Input
            type="text"
            placeholder="请输入密码"
            prefix={<LockOutlined />}
            allowClear
            autoComplete="off"
          />
        </Form.Item>
        <Form.Item
          name="code"
          rules={[
            {
              validator: checkCode,
            },
          ]}
        >
          <Input
            type="text"
            placeholder="请输入验证码"
            prefix={<CommentOutlined />}
            autoComplete="off"
            allowClear
          />
        </Form.Item>
        <Form.Item>
          <Button className="submit" type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>

        <img
          className="code"
          src="http://39.107.231.173:84/static/media/captcha.f7ea0f5d85489d9fff31.jpg"
          alt="code"
        />
      </Form>
    </Container1>
  );
};

export default Index;
